let product=(function(){
	let data;
	let row=document.querySelector(".row");//找到row div
	let lis=document.querySelectorAll(".nav li");
	//从服务器端获取数据 (ajax)
	const getData=function getData(){
		//1.创建XMLHttpRequest核心对象
		let xhr=new XMLHttpRequest;
		//2. 建立连接 open(连接方式,连接路径,是同步还是异步)
		//连接方式  get/post
		//是同步还是异步   异步:true  同步:false
		xhr.open("GET","product.json",false)
		//3. 注册监听  onreadystatechange 事件
		xhr.onreadystatechange=function(){
			//状态值 readyState---4
			//状态码  status---200
			if(xhr.readyState===4&&xhr.status===200){
				//console.log(xhr.response);//请求成功后，返回的结果 response
			    data=JSON.parse(xhr.response);
			}
		}
		//4. 发送数据 send()
		xhr.send(null);
	}
	
	//循环渲染
	const render=function render(){
		let str="";
		//循环数据，累加data的内容给str
		data.forEach(item=>{
			let {id,title,price,hot,time,img}=item;//解构赋值
			str+=`<div class="col-md-3 col-sm-6 col-xs-12" id=${id}>
				<div class="thumbnail">
				    <img src="${img}">
				    <div class="caption">
				        <h3>${title}</h3>
				        <p>价格: ￥${price}</p>
				        <p>时间: ${time}</p>
						<p>热度: ${hot}</p>
				    </div>
				</div>
			</div>`
		})

		row.innerHTML=str;//给row div 添加内容
	}
	//功能部分
	const handle=function handle(){
		//第一个li添加点击事件
		let flag=-1;//-1
		lis[0].onclick=function(){
			flag=flag*-1;//-1*-1=1  1*-1=-1  
			data.sort((a,b)=>{//根据 price 升序排列
				return (a.price-b.price)*flag;
				//(a.price-b.price)*1= a.price-b.price
				//(a.price-b.price)*-1= b.price-a.price
			})
			console.log(data);
			render();//重新渲染页面
		}
		
		let flagtime=-1;
		lis[1].onclick=function(){
			flagtime=flagtime*-1;
			data.sort((a,b)=>{//时间是字符串不能比较，要转化成为时间戳比较
				a=new Date(a.time).getTime();
				b=new Date(b.time).getTime();
				return (a-b)*flagtime;
			})
			render();//重新渲染页面
		}
		
	}
	
	return {
		init(){//初始化
			getData();
			render();
			handle();
		}
	}
})()

product.init();